<template>
	<div class="trainListDetails">
		<div class="trainListDetails_box">
			<div class="trainListDetails_city">
				<div class="trainListDetails_city_name font_spill">{{msg.fromStation || msg.fromCity}}</div>
				<div class="trainListDetails_city_time">
					<span>{{msg.fromTime}}</span>
					<img src="http://h5.kpcx179.com/wximages/train/shi@2x.png" alt="" v-if="msg.fromPassType !=1" />
				</div>
				<div class="trainListDetails_city_date" v-if="msg.startDate">
					<span>{{msg.startDate.day}}</span>
					<span v-if="msg.startDate.isToday">今天</span>
					<span v-else-if="msg.startDate.isTomorrow">明天</span>
					<span v-else>{{msg.startDate.week}}</span>
				</div>
			</div>
			<div class="trainListDetails_middle">
				<div class="trainListDetails_pullInByIdCard">
					<span>{{msg.trainNo || msg.toCity}}</span>
					<div @click="pullInByIdCard" v-if="msg.pullInByIdCard">
						<img src="http://h5.kpcx179.com/wximages/train/shenfenzheng1@2x.png" alt=""/>	
					</div>
				</div>
				<div @click="timeTable">
					<img src="http://h5.kpcx179.com/wximages/train/shikebiao@2x.png" alt="" />
				</div>
				<div v-if="msg.runTimeSpan">{{msg.runTimeSpan | runTime}}</div>
			</div>
			<div class="trainListDetails_city active">
				<div class="trainListDetails_city_name active font_spill">{{msg.toStation}}</div>
				<div class="trainListDetails_city_time">
					<img src="http://h5.kpcx179.com/wximages/train/zhong@2x.png" alt="" v-if="msg.toPassType !=1" />
					<span>{{msg.toTime}}</span>
				</div>
				<div class="trainListDetails_city_date" v-if="msg.endDate">
					<span>{{msg.endDate.day}}</span>
				</div>
			</div>
		</div>
		<byIdCard @mask='idCardClick' v-show="isByIdCard"></byIdCard>
	</div>
</template>
<style scoped>
	.trainListDetails {
		width: 100%;
		box-sizing: border-box;
		padding: 21px 17px 0;
	}
	
	.trainListDetails_box {
		background:linear-gradient(to right,#0aeecb,#50c9c3);
		height: 179px;
		border-radius: 10px 10px 0px 0px;
		padding: 28px 38px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.trainListDetails_city {
		width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 100%;
		font-size: 32px;
		color: #fff;
	}
	
	.trainListDetails_city.active {
		align-items: flex-end;
	}
	
	.trainListDetails_city_date {
		font-size: 24px;
	}
	
	.trainListDetails_city_time {
		display: flex;
		align-items: center;
	}
	
	.trainListDetails_city_time img {
		width: 34px;
		height: 34px;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.trainListDetails_middle {
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 26px;
	}
	
	.trainListDetails_middle img {
		width: 207px;
		margin: 10px 0;
		height: 33px;
	}
	
	.trainListDetails_city_name {
		width: 100%;
		text-align: left;
	}
	
	.trainListDetails_city_name.active {
		text-align: right;
	}
	
	.trainListDetails_pullInByIdCard {
		display: flex;
		justify-content: flex-start;
		align-items: center;	
	}
	
	.trainListDetails_pullInByIdCard > div{
		width: 40px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainListDetails_pullInByIdCard > div > img {
		width: 100%;
		height: 100%;
	}
</style>
<script>
	import byIdCard from "./byIdCard"; //身份证乘车提示
	export default {
		props: {
			msg: Object,
			departureDate:String,
		},
		data() {
			return {
				isByIdCard:false,
			}
		},
		mounted() {
//			console.log(this.msg);
		},
		methods: {
			idCardClick(){
				this.isByIdCard = false;
			},
			pullInByIdCard(){
				this.isByIdCard = true;
			},
			timeTable(){
				var fromStation = encodeURI(this.msg.fromCity || this.msg.fromStation);
				var toStation = encodeURI(this.msg.toCity || this.msg.toStation);	
				var trainNo = this.msg.trainNo ? this.msg.trainNo.split('|')[0] : this.msg.trainNum;
				this.$router.push({
					name: 'trainTime',
					query: {
						fromStation,
						toStation,
						departureDate:this.departureDate,
						trainNo,
					},
				});
			}
		},
		created() {
			
		},
		watch: { //监听放置

		},
		filters: { //过滤
			runTime(runTime) {
				return(Math.floor(runTime / 60) > 0) ? (Math.floor(runTime / 60) + '小时' + (runTime % 60) + '分钟') : (runTime + "分钟");
			},
		},
		components: {
			byIdCard
		},
		computed: {}
	};
</script>